<template>
  <div>
    <!-- <div class="topheader">
      <div class="Theadermain">
        <div class="headerimg" @click="back">
          <img src="../../../assets/img20.png" width="100%" />
        </div>
        <div>微信积分系统</div>
        <div style="width: 0.5rem; margin-left: 10px"></div>
      </div>
    </div> -->
    <heaDer></heaDer>

    <div class="flex_lr_m top">
      <div
        class="flex_c_m"
        :class="choose == 1 ? 'active' : ''"
        @click="choose = 1"
      >
        我是组长
      </div>
      <div
        class="flex_c_m"
        :class="choose == 2 ? 'active' : ''"
        @click="choose = 2"
      >
        我是组员
      </div>
    </div>
    <div class="content">
      <template v-if="choose == 1">
        <div
          style="width: 50%; text-align: center; margin: 5% auto"
          v-show="xianshi"
        >
          <van-loading />
        </div>
        <template v-for="item in reviewZzList">
          <div
            class="single"
            @click="
              toDetail({ id: item.id, role: item.role, state: item.state })
            "
          >
            <div>
              <div class="one_line">{{ item.title || "标题" }}</div>
              <div style="width: 100%; color: #aeaeae; font-size: 12px">
                {{ item.createTime || "时间" }}
                <div
                  v-if="item.state == 2"
                  style="
                    background-color: rgb(174, 174, 174);
                    color: rgb(255, 255, 255);
                    padding: 4px 6px;
                    border-radius: 14px;
                    font-size: 14px;
                    float: right;
                    margin-top: -3%;
                  "
                >
                  已评审
                </div>
                <div
                  v-else
                  style="
                    background-color: orange;
                    color: rgb(255, 255, 255);
                    padding: 4px 6px;
                    border-radius: 14px;
                    font-size: 14px;
                    float: right;
                    margin-top: -3%;
                  "
                >
                  未评审
                </div>
              </div>
            </div>
            <div style="clear: both"></div>
          </div>
        </template>
        <div class="mainnn" v-show="yincang">
          <div class="zwxximg">
            <img src="../../../assets/zwxx.png" alt="" />
          </div>
          <div class="zwxx">暂无数据</div>
        </div>
      </template>
      <template v-if="choose == 2">
        <div
          style="width: 50%; text-align: center; margin: 5% auto"
          v-show="xianshi"
        >
          <van-loading />
        </div>
        <template v-for="item in reviewZyList">
          <div
            class="single"
            @click="
              toDetail({ id: item.id, role: item.role, state: item.state })
            "
          >
            <div>
              <div class="one_line">{{ item.title || "标题" }}</div>
              <div style="width: 100%; color: #aeaeae; font-size: 12px">
                {{ item.createTime || "时间" }}
                <div
                  v-if="item.state == 2"
                  class="but"
                  style="
                    background-color: rgb(174, 174, 174);
                    color: rgb(255, 255, 255);
                    padding: 4px 6px;
                    border-radius: 14px;
                    font-size: 14px;
                    float: right;
                    margin-top: -3%;
                  "
                >
                  已评审
                </div>
                <div
                  v-else
                  class="but"
                  style="
                    background-color: orange;
                    color: rgb(255, 255, 255);
                    padding: 4px 6px;
                    border-radius: 14px;
                    font-size: 14px;
                    float: right;
                    margin-top: -3%;
                  "
                >
                  未评审
                </div>
              </div>
            </div>
            <div style="clear: both"></div>
          </div>
        </template>
        <div class="mainnn" v-show="yincang2">
          <div class="zwxximg">
            <img src="../../../assets/zwxx.png" alt="" />
          </div>
          <div class="zwxx">暂无数据</div>
        </div>
      </template>

      <!-- <template v-for="item in reviewList">
		<div class="single" @click="toDetail({id:item.id,role:item.role,state:item.state})">
			<div class="one_line">{{item.title || '标题'}}</div>
			<div>{{item.createTime || '时间'}}</div>
			<span class="state" v-if="item.state==2">已评审</span>
			<span class="state" v-else>未评审</span>
		</div>
	</template> -->
      <!-- <div class="mainnn" v-if="reviewList.length==0">暂无内容</div> -->
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import heaDer from "@/components/page/header/header.vue";
export default {
  data() {
    return {
      reviewZzList: [],
      reviewZyList: [],
      choose: 1,
      xianshi: true,
      yincang: false,
      yincang2: false,
    };
  },
  components: {
    heaDer,
  },
  mounted() {
    this.registerDay(0).then((response) => {
      this.reviewZzList = response.list;
      this.xianshi = false;
      if (this.reviewZzList == "") {
        this.yincang = true;
        console.log("22222222222");
      } else {
        this.yincang = false;
      }
    });
    this.registerDay(1).then((response) => {
      this.reviewZyList = response.list;
      this.xianshi = false;
      console.log(this.reviewZyList);
      if (this.reviewZyList == "") {
        this.yincang2 = true;
        console.log("11111111111");
      } else {
        this.yincang2 = false;
      }
    });
  },
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      if (from.name == "reviewDetail") {
        vm.registerDay(0).then((response) => {
          vm.reviewZzList = response.list;
        });
        vm.registerDay(1).then((response) => {
          vm.reviewZyList = response.list;
        });
        // request({
        //   url: "/generator/access/front/list",
        //   method: "get",
        // }).then((response) => {
        //   console.log(response.status);
        //   if (response.code == 0) {
        //     this.reviewList=response.list
        //   }
        // });
      }
    });
  },
  methods: {
    registerDay(role) {
      return request({
        url: "/generator/access/front/list?role=" + role,
        method: "get",
      });
    },
    toDetail(row) {
      this.$router.push({
        name: "reviewDetail",
        query: { row: row.id, role: row.role, state: row.state },
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
  },
};
</script>

<style scoped="scoped">
.zwxximg {
  widows: 100%;
  text-align: center;
  margin-top: 20%;
}
.zwxx {
  width: 100%;
  text-align: center;
}
.content {
  overflow: hidden;
  padding: 0 12px 12px;
}
.top {
  height: 40px;
}
.top > div {
  width: 50%;
  height: 100%;
  border-bottom: 1px solid #f8f8f8;
  border-color: #f8f8f8;
}
.active {
  background-color: orange;
  color: #fff;
  border-color: orange;
}
.single {
  border-bottom: 1px solid rgb(235, 235, 235);
  /* display: flex; */
  align-items: center;
  width: 90%;
  margin: 0px auto;
  padding: 20px 0px;
}
.single > div:nth-child(1) {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
.single > div:nth-child(2) {
  font-size: 14px;
  color: #b9b9b9;
}
.one_line {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4%;
}
.but{
   min-width:68px;
   text-align: center;
}
</style>
